<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>公交查询</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-cache" />
  
  <meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 

<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">

<link rel="stylesheet" href="assets/css/amaze.min.css">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/fonts2/iconfont.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<style>
body{
	padding-top:150px;
	padding-bottom:50px;
}
	
.am-content {
	background: #FFFFFF;
}

.am-tabs {
	margin: 0px;
}

#sites {
	position:absolute;
	border: 0px;
	padding: 0 1rem;
	border-top: 1px solid #d6d6d6;
	height:auto;
	width:100%;
	top:150px;
	bottom:50px;
}

.item {
	line-height: 45px;
	height: 45px;
}

.item .site {
	float: left;
	width: 100%;
	border-bottom: 1px solid #EFEEEE;
	font-size: 1.5rem;
	color: #3d4245;
}

.item .site-gray {
	color: #9b9b9b;
}

.item .site-highligh {
	color: #fab34d;
}

.item .highligh {
	background: #fab34d;
}

.demo-bar,.am-tabs-default .am-tabs-nav {
	z-index: 99;
	position: relative;
}

.h-line {
	height: 95%;
	width: 1px;
	position: absolute;
	background-color: #EFEEEE;
	z-index: 9;
	top: 210px;
	bottom:20px;
	left: 21px;
}

.am-tabs-default .am-tabs-nav>.am-active a {
	background-color: #FFFFFF;
	color: #5eacf6;
}

.am-tabs-default .am-tabs-nav {
	padding: .5rem 0px;
	background-color: #ffffff;
}

.am-tabs-default .am-tabs-nav a {
	background-color: #FFFFFF;
}

.am-tabs-nav li {
	border-left: 1px solid #e2e5e6;
}

.am-tabs-default .am-tabs-nav a {
	line-height: 26px;
	font-size: 1.3rem;
	color: #9b9b9b;
}

.icon-jiantou {
	font-size: 1rem;
}

.footer{
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
	z-index:100;
	background-color:#f5f5f5;
	border-top:1px solid #EFEEEE;
	height:50px;
	padding:0px 2%;
}
.head{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
.ttop{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
 	background-color:#fff;
	filter:alpha(opacity:30); 
	opacity:1; 
	-moz-opacity:1;
	-khtml-opacity: 1;
}

.exchange{
	margin-right:10px;
	float:right;
	padding:10px 0;
}

.exchange ul{
 list-style: none;
}

.exchange li{
	float:left;
}

</style>

</head>
<body>
	<div class="ttop">
		<header class="demo-bar head">
			<a href="javascript:history.go(-1);" id="back2"
				class="icon iconfont icon-left demo-icon-home"></a>
			<h1 id="title">时刻表</h1>
		</header>
		<div style="border-bottom: 1px solid #EFEEEE; padding:10px;margin-top:50px;">
			<div style="margin-left:10px;float:left;">
				<div>开往<span id="goto"></span></div>
				<div style="font-size:1.4rem;color:#9d9d9d;" id="firstLastCar">首末班车：</div>
				<div style="font-size:1.4rem;color:#9d9d9d;" id="allprice">全程票价：元</div>
			</div>
			<div class="exchange">
				<ul>
					<li><img src="images/exchange.png" width="25px" height="25px" onclick="changeTarget();"/>&nbsp;</li>
					<li style="border:1px solid #cccccc; height:30px;"></li>
					<li>&nbsp;<img src="images/qxshouc.png" width="25xp" height="25px" onclick="shouc(this)"/>
					<img src="images/shouc.png" width="25xp" height="25px" onclick="qxshouc(this)" style="display:none;"/></li>
				</ul>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div style="background-color:#f5f5f5;line-height:10px;height:10px;"></div>
	</div>
	<div id="sites" style="overflow:scroll;"></div>
	<footer class="footer">
		<div id="sy" style="width:32%;float:left;text-align:center;color:#1a7de2;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-bus" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路查询</span></li>
			</ul>
		</div>
		<div id="xlgh" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-guiji" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路规划</span></li>
			</ul>
		</div>
		<div id="wdsc" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-user" style="font-size:22px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">我的收藏</span></li>
			</ul>
		</div>
	</footer>
	
	<script id="list-site-templ" type="text/x-handlebars-template">
      {{#each result}}
			<div class="item" data-siteId = "{{siteId}}" data-siteName = "{{siteName}}">
				<div class="site" tabindex="{{tabindex}}">
					<div style="padding:10px;">
						<div style="float:left;line-height:30px;height:30px;">
							<img src="images/start.png" width="25px" height="25px" style="vertical-align:middle;"/>
							发车站点
						</div>
						<div style="float:right;line-height:30px;color:rgb(155, 155, 155);">{{siteName}}</div>
						<div style="clear:both;"></div>
					</div>
					<div style="padding:0px 10px 10px 10px;">
						<span style="float:left;line-height:30px;">
							<img src="images/starttime.png" width="25px" height="25px" style="vertical-align:middle;"/>
							发车时间
						</span>
						<span style="float:right;line-height:30px;color:rgb(155, 155, 155);">{{busTime}}</span>
						<div style="clear:both;"></div>
					</div>
				</div>
			</div>
      {{/each}}
	</script>


	<script type="text/javascript">		
		var query = $.getLocationQueryData();
		var longitude = query.longitude;
		var latitude = query.latitude;
		var lineId = query.lineId;
		var stream = query.stream;
		var qsiteId = query.siteId;
		var siteName = unescape(query.siteName);
		var phone=query.phone;
		
		function getElementTop(element){
		　　　　var actualTop = element.offsetTop;
		　　　　var current = element.offsetParent;
		　　　　while (current !== null){
		　　　　　　actualTop += current.offsetTop;
		　　　　　　current = current.offsetParent;
		　　　　}
		　　　　return actualTop;
		　　}
		
		function flushSites(lineId,stream) {
			var url = 'taxi/json/nanda?url='+escape("getBusTimeList.action?lineId="+lineId+"&stream="+stream);
			var params = {};
			$.asyncrequest(url, params, function(data) {
				data = JSON.parse(data);
				if (data.retCode!=0) {
					$.alert(data.message);
					$.AMUI.progress.done();
					return;
				}
				
				var items = new Array();
				var located = false;
				for(var i=0;i<data.result.length;i++){
					var item = data.result[i];
					var bustime = item.busTime;
					var timemill = new Date(Date.parse(bustime.replace(/-/g, "/")));
					if(timemill >= new Date() && !located){
						item.tabindex=0;
						located=true;
					} else {
						item.tabindex=1;
					}
					var midtime = bustime.split(" ")[1];
					var time = midtime.substring(0,midtime.lastIndexOf(":"));
					item.busTime = time;
					items.push(item);
				}
			
				data.result = items;
				var myTemplate = Handlebars.compile($('#list-site-templ')
						.html());
				var html = myTemplate(data);
				$('#sites').html(html);
				$.AMUI.progress.done();
				var pos = $("div[tabindex=0]")[0];
				//pos.scrollIntoView();
			});
		}
		
		function flushLineInfo(lineId) {
			var url = 'taxi/json/nanda?url='+escape("busLineInfo.action?lineId="+lineId+"&typeId=&lineName=");
			var params = {};
			$.request(url,params,function(data) {
				data = JSON.parse(data);
				//var data = {"result":[{"dispatches":90,"downDistance":0,"endSiteId":"14","endSiteId1":"2518","endSiteName":"胥泊村","endSiteName1":"汽车总站","endStation":"14","firstTime":"060000","interval":8,"lastTime":"174000","lineId":"1","lineName":"1","mileage":9,"price":1,"startSiteId":"2518","startSiteId1":"14","startSiteName":"汽车总站","startSiteName1":"胥泊村","startStation":"2518","startTime":"20141223000000","typeId":"2001","upDistance":0,"vehicleAmount":10}],"retCode":0};
				if(data.retCode != 0){
					alert("获取线路信息失败");
					return;
				}
				data = data.result[0];
				var firstTime = data.firstTime1;
				var lastTime = data.lastTime1;
				if(stream==0) {
					$("#goto").html(data.endSiteName);
				} else {
					$("#goto").html(data.endSiteName1);
					firstTime = data.firstTime2;
					lastTime = data.lastTime2;
				}
				firstTime = firstTime?firstTime:'';
				lastTime = lastTime?lastTime:''; 
				$("#title").html(data.lineName);
				$("#firstLastCar").html("首末班车：&nbsp;" + firstTime +"-" + lastTime);
				$("#allprice").html("全程票价：&nbsp;" + data.price + "元");
			});
		}
		
		function changeTarget() {
			var oldUrl = window.location.href;
			var url = oldUrl.substring(0, oldUrl.indexOf("?"));
			if(stream==0) {
				stream=1;
			} else {
				stream=0;
			}
			var newUrl = url + "?lineId="+lineId+"&stream="+stream+"&siteId=" + qsiteId
					+"&longitude="+longitude+"&latitude="+latitude+"&phone="+phone;
			window.location.href = newUrl + "&tt="+Math.random();
		}
		
		//收藏、取消收藏
		function shouc(obj) {
			if(!phone || phone=='') {
				$.alert("手机号不能为空");
				return;
			}
			var url = "taxi/json/addBusCollection";
			var params = {lineId:lineId,siteId:qsiteId,phone:phone};
			$.request(url,params,function(data) {
				if(data.retCode != 0){
					$.alert(data.message);
					return;
				}
				$(obj).hide();
				$(obj).next().show();
				$.alert("收藏成功");
			});
		}
	
		function qxshouc(obj) {
			if(!phone || phone=='') {
				$.alert("手机号不能为空");
				return;
			}
			var url = "taxi/json/delBusCollection";
			var params = {lineId:lineId,siteId:qsiteId,phone:phone};
			$.request(url,params,function(data) {
				if(data.retCode != 0){
					$.alert('取消收藏失败');
					return;
				}
				$(obj).hide();
				$(obj).prev().show();
				$.alert("取消成功");
			});
		}
		
		if (!lineId) {
			$.alert('缺少参数');
		} else {
			flushSites(lineId,stream);
			flushLineInfo(lineId);
		}
		
		$("#sy").click(function(){
			location.href = "bus.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
		});
		
		$("#xlgh").click(function(){
			location.href = "bustransfer.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
		});
		
		$("#wdsc").click(function(){
			location.href = "collection.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
		});
	</script>


</body>
</html>
